課程目的:

這次章節的內容是，偵測輸入的按鍵，若輸入文字有對應到當初設定的＂密碼＂，便會出現特效
就像小時候在玩小朋友齊打交的時候，輸入Lf2.net時會出現隱藏角色可以選擇，這個章節告訴我們如何用JS實現此效果

作品實做
注意：此章節主要觀看console來檢測進行

本次功能實作重點：

• 設定密碼
• 監聽按鍵
• 對應密碼顯示特效邏輯

設定密碼

let secretCode = "slimes";

監聽按鍵

　　　let pressed = []; //設定接收key值的array
      window.addEventListener("keyup", (e) => {
         pressed.push(e.key); //監聽到的key值輸入進空arr
         console.log(pressed);
        }
      });

創建一個空arr(pressed)用來接收key值，當監聽到e.key時push進去

於是我們來看一下pressed監聽到的數值

我們已經成功取到e.key的值了！

對應密碼顯示特效邏輯

    let secretCode = "slimes";
      let pressed = []; //設定接收key值的array
      window.addEventListener("keyup", (e) => {
        pressed.push(e.key); //監聽到的key值輸入進空arr
        pressed.length > secretCode.length && pressed.shift();
        if (pressed.join("").includes(secretCode)) {
          console.log("DING DING!!");
          cornify_add();
        }
      }); 

處理pressed長度:

pressed.length > secretCode.length && pressed.shift() 使用了短路求值法，因為我想要控制pressed的長度剛好等於secretCode 的字串長度

所以當pressed.length>secretCode.length執行shift()將pressed[0]刪除，這樣pressed.length就會等於secretCode.length

判斷pressed內容是否與密碼相符:

console出pressed時，會出現的是一個陣列內有好幾個元素，需要將它轉為字串才可以與密碼比對，於是可以利用Array.prototype.join()

Array.prototype.join() 方法會將陣列，或一個類陣列（array-like）物件中所有的元素連接、合併成一個字串，並回傳此字串。

join(””)，代入””將陣列中的，替換成空字串，元素之間便不會有任何字元

if (pressed.join("").includes(secretCode))判斷是否為同一個字串，如果是則執行 cornify_add();
這樣在網頁輸入＂slimes＂特效就會跑出來了！

最後重點整理 ：

• includes() 方法會判斷陣列或String是否包含特定的元素，並以此來回傳 true 或 false
• join() 方法可以用來連結陣列並回傳字串，括號中可替代元素之間的**連結詞，**如果沒有設定，預設為，

導讀文件以及學習資源

JS30